// 在这里写redux的基础代码是为了方便.redux不依赖于react.在任何可以运行js的地方都可以运行redux

// 创建store对象
// 引入创建store的方法
import { createStore } from 'redux'

// 调用createStore创建store对象
// const store = createStore(reducer函数, 初始数据)
// 由于创建store需要传入reducer函数,所以要提前定义reducer函数
// reducer是真正修改数据的角色.reducer是被store对象调用的
// reducer函数的执行时机:
// 1. 创建store时,调用reducer为了初始化数据
// 2. store.dispatch时,调用reducer为了修改数据
function reducer(state = { count: 999, msg: 'hello redux' }, action) {
  // console.log('reducer函数执行了', state, action)
  // state是store中存储的最新的数据
  // action就是需求对象(描述要修改哪个数据,以及改成什么样子)
  switch (action.type) {
    case 'ADD':
      // 注意:redux中不能直接修改state数据. 按照redux的语法,reducer函数中返回值什么是什么,则store中的数据就被改成了什么
      // state.count = state.count + 1
      const newCount = state.count + 1
      return {
        ...state, //展开state,目的是为了保留其他数据
        // count: 1,
        // msg: 'hello redux'
        count: newCount,
      }
    case 'SUB':
      return {
        ...state, //展开state,目的是为了保留其他数据
        // count: 1,
        // msg: 'hello redux'
        count: state.count - 1,
      }
    case 'SET_MSG':
      return {
        ...state,
        msg: action.target, // action.target是未来要修改msg数据时传入的msg的目标值.target属性名也是随便起的
      }
    // 注意: reducer函数中,必须写一个default.default中必须return state. 因为这段代码才是真正初始化store对象中state数据的代码
    default:
      return state
  }
}
// createStore的时候,reduer函数就会被调用一次
const store = createStore(reducer)

// 获取store对象中存储的数据
// store.getState() 返回值就是store中存储的数据

// 监听store中state数据的变化
store.subscribe(() => {
  //当store中数据发生变化,则这个函数执行
  console.log(store.getState())
})

// 修改store对象中存储的数据
//  reducer() 直接调用reducer无法修改store中的数据. 必须让store内部调用reducer
//store.dispatch(action对象) // 如果要修改store中的数据,必须调用store的dispatch方法,让store内部调用reducer函数,从而修改数据.并且调用dispatch的时候,必须传入action对象
store.dispatch({ type: 'ADD' })

store.dispatch({ type: 'ADD' })
